<template>
    <el-dialog :title="$t('ota.upgrade.deviceDialog.selectDevice')" :visible.sync="deviceDialogVisible"
               @close="cancel" append-to-body custom-class='deviceDialog' width="1500px">

        <el-form ref="form" :model="queryParams" size="small" :inline="true">

            <el-form-item :label="$t('ota.upgrade.deviceCode')" prop="deviceCode">
                <el-input v-model="queryParams.deviceCode" placeholder="" maxlength="50" />
            </el-form-item>

            <el-form-item :label="$t('ota.upgrade.softwareVersion')" prop="softwareVersion">
              <el-input v-model="queryParams.softwareVersion" placeholder="" maxlength="50" />
            </el-form-item>
            <el-form-item :label="$t('vehicle.type.vehicleModel')" prop="vehicleType">
                <el-select v-model="queryParams.vehicleType" :placeholder="$t('vehicle.type.placeholder.vehicleModel')" clearable>
                    <el-option v-for="dict in typeList" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
     

            <el-form-item label=''>
                  <el-button type='primary' @click='handleQuery'>{{$t('common.button.search')}}</el-button>
                  <el-button @click='resetQuery'>{{$t('common.button.reset')}}</el-button>
                  <el-button type='primary' icon='el-icon-upload' @click='showImportDialog = true'>{{$t('common.button.import')}}</el-button>
              </el-form-item>
        </el-form>

        <el-table border :data="gridData || deviceList" v-loading='loading'
                  @selection-change="handleSelectionChange" height="52vh" :empty-text="$t('common.table.noData')">
            <el-table-column type='selection'></el-table-column>
            <el-table-column :show-overflow-tooltip="true" align="center" prop="deviceCode" :label="$t('ota.upgrade.deviceCode')"  />
            <el-table-column :show-overflow-tooltip="true" align="center" prop="softwareVersion" :label="$t('ota.upgrade.softwareVersion')"  />
            <el-table-column :show-overflow-tooltip="true" align="center" prop="deviceTypeName" :label="$t('ota.upgrade.deviceTypeName')"  />
            <el-table-column :show-overflow-tooltip="true" align="center" prop="deviceModelName" :label="$t('ota.upgrade.deviceModelName')"  />
            <el-table-column :show-overflow-tooltip="true" align="center" prop="userCode" :label="$t('ota.upgrade.userCode')"   />
            <el-table-column :show-overflow-tooltip="true" align="center" prop="vehicleNick" :label="$t('ota.upgrade.vehicleNick')"  />
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">{{$t('common.button.confirm')}}</el-button>
            <el-button @click="cancel">{{$t('common.button.cancel')}}</el-button>
        </div>

        <ImportDevice :params='params' @loadData="loadData" :importVisible.sync='showImportDialog' @close='showImportDialog = false' @selection='handleUploadList' />
    </el-dialog>
</template>

<script>
import { listDevice } from '@/api/device/center'
import { typeTree } from "@/api/device/type";
import { modelTree } from "@/api/device/model";
import ImportDevice from './ImportDevice';
import { listType } from "@/api/vehicle/type/data";


export default {
    name: 'DeviceDialog',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        deviceList: {
            type: Array,
            default: () => { return [] }
        },
        params: {
            type: Object,
            default: () => { return { deviceTypeId: undefined, deviceModelId: undefined, bluetoothUpgrade: false } }
        }
    },
    components: { ImportDevice },
    data() {
        return {
            queryParams: {
                deviceCode: undefined,
                vehicleType:undefined,
                softwareVersion: undefined,
                deviceTypeId: undefined,
                deviceModelId: undefined,
                pageSize: 10,
                pageNum: 1
            },
            groups: [],
            deviceDialogVisible: false,
            gridData: [],
            total: 0,
            loading: false,
            selectedList: [],
            showImportDialog: false,
            modelOptions:[],
            typeOptions:[],
            typeList:[]
        }
    },
    watch: {
        dialogVisible(val) {
            this.deviceDialogVisible = val;
            if (val && this.deviceList) {
                this.gridData = this.deviceList;
                this.total = this.deviceList.length;
                // this.queryParams = {
                //     deviceCode: undefined,
                //     groupId: undefined,
                //     softwareVersion: undefined,
                //     pageSize: 10,
                //     pageNum: 1
                // }
            }
        },
        params(val){
            this.queryParams.deviceTypeId = val.deviceTypeId;
            this.queryParams.deviceModelId = val.deviceModelId;
        }
    },
    created() {
        this.getTypeList();
    },
    methods: {
        loadData(data) {
          this.gridData = data;
        },
        getList() {
            this.loading = true;
            const params = { ...this.queryParams, ...this.params }
            listDevice(params).then(response => {
                this.gridData = response.rows;
                this.total = response.total;
                this.loading = false;
            })
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList()
        },
        resetQuery() {
            this.resetForm("form");
            this.handleQuery();
        },
        submitForm() {
            this.deviceDialogVisible = false;
            this.$emit('selection', this.selectedList);
            this.$emit('close')

        },
        cancel() {
            this.deviceDialogVisible = false;
            this.showImportDialog = false;
            this.resetQuery();
            this.$emit('close')
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        handleUploadList(val) {
            this.gridData = val
        },
        getTypeList() {
            listType().then(response => {
                this.typeList = response.rows.map(item => {
                    return {
                        label: item.typeName,
                        value: item.id
                    }
                })
            })
        },
    }
}
</script>

<style lang='scss' >
.deviceDialog {
    width: 90%;
    height: 90vh;
}
</style>
